{% extends "_layouts/site.html" %}

{% block title %}Browser support{% endblock %}
{% block description %}Vanilla Framework browser support{% endblock %}
{% block copydoc %}https://docs.google.com/document/d/1flcSinNnjOJw88ooVQfUjQW8ZDHSXOe2cTHmgwIEx6I/edit{% endblock %}


{% block content %}
<div id="main-content" class="p-strip">
    <div class="row">
      <div class="col-6">
        <h1 class="u-no-margin--bottom">Browser support</h1>
      </div>
      <div class="col-6">
        <p>Vanilla framework follows the principles of progressive enhancement and web standards. Users should be able to access core content and functionality from any browser or operating system, with varying degrees of access to visual and other enhancements — design components do not have to look exactly the same on every browser.</p>
      </div>
    </div>
</div>

<div class="u-fixed-width">
  <hr />
</div>

<div class="p-strip">
    <div class="row">
      <div class="col-6">
        <h2>Bugs and prioritisation</h2>
      </div>
      <div class="col-6">
        <ul class="p-list">
          <li class="p-list__item is-ticked">If the bug prevents access to core content (for example, by hiding it or covering it), it should be prioritised</li>
          <li class="p-list__item is-ticked">If the bug relates to visual differences that do not affect access to content on modern browsers, it should be queued up</li>
          <li class="p-list__item is-ticked">Priority level should be determined case by case</li>
          <li class="p-list__item is-ticked">If the bug relates to visual differences that do not affect access to content on old browsers, it should be deprioritised</li>
        </ul>
      </div>
    </div>
</div>

<div class="u-fixed-width">
  <hr />
</div>

<div class="p-strip">
    <div class="row">
      <div class="col-6">
        <h2>Supported browsers</h2>
        <p>The following are the browsers that we actively test all components on. That does not mean other browsers are not supported or that bugs reported are not acted on.</p>
      </div>
      <div class="col-6">
        <ul class="p-list is-split">
          <li class="p-list__item">
            <div class="p-heading-icon--small">
              <div class="p-heading-icon__header">
                <img class="p-heading-icon__img" src="https://assets.ubuntu.com/v1/09a6a50e-vf.io-chrome.png" alt="" />
                <p class="p-heading-icon__title">Chrome 62 or greater</p>
              </div>
            </div>
          </li>
          <li class="p-list__item">
            <div class="p-heading-icon--small">
              <div class="p-heading-icon__header">
                <img src="https://assets.ubuntu.com/v1/a45d30aa-vf.io-firefox.svg" class="p-heading-icon__img" alt="" />
                <p class="p-heading-icon__title">Firefox 56 or greater</p>
              </div>
            </div>
          </li>
          <li class="p-list__item">
            <div class="p-heading-icon--small">
              <div class="p-heading-icon__header">
                <img src="https://assets.ubuntu.com/v1/a030d872-vf.io-safari.svg" class="p-heading-icon__img" alt="" />
                <p class="p-heading-icon__title">Safari 11 or greater</p>
              </div>
            </div>
          </li>
          <li class="p-list__item">
            <div class="p-heading-icon--small">
              <div class="p-heading-icon__header">
                <img src="https://assets.ubuntu.com/v1/de0673bb-vf.io-edge.svg" class="p-heading-icon__img" alt="" />
                <p class="p-heading-icon__title">Edge 16 or greater</p>
              </div>
            </div>
          </li>
          <li class="p-list__item">
            <div class="p-heading-icon--small">
              <div class="p-heading-icon__header">
                <img src="https://assets.ubuntu.com/v1/74738acc-vf.io-opera.svg" class="p-heading-icon__img" alt="" />
                <p class="p-heading-icon__title">Opera 48 or greater</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
</div>
{% endblock %}
